<template>
  <div class="login-container">
    <m-header title="登录"></m-header>
    <div class="login">
      <div class="login-info">
        <div class="account comm">
          <div class="input-area">
            <input class="user" v-model="username" type="text" placeholder="请输入账号/手机号">
        </div>
        </div>
        <div class="password comm">
          <div class="input-area">
            <input class="pass" ref="pass" v-model="password" :type="[showPwd?'text':'password']" placeholder="请输入密码">
        </div>
          <div class="view" :class="{'no': !showPwd}" @click="showPwd=!showPwd"><span class="icon"></span></div>
        </div>
        <div class="login-btn" @click="handleLogin">登录</div>
        <div class="reg-pass">
          <span class="reg" @click="$router.push({path: '/register'})">立即注册</span>
          <span class="pass" @click="$router.push({path: '/forgetPwd'})">忘记密码?</span>
        </div>
      </div>
    </div>
    <div class="login-other" v-if="false">
      <div class="other"><span>第三方登录</span></div>
      <div class="others">
        <img class="qq" src="../../assets/imgs/login/icon-qq@2x.png" alt="">
        <img class="wechat" src="../../assets/imgs/login/icon-wechat@2x.png" alt="">
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex';

export default {
  name: 'Login',
  components: {
  },
  data () {
    return {
      showPwd: false,
      username: '',
      password: ''
    };
  },
  methods: {
    ...mapActions({
      setLoginInfo: 'common/setLoginInfo'
    }),
    handleLogin () {
      if (!this.username) {
        this.$vux.toast.text('请输入账号/手机号');
        return false;
      }
      if (!this.password) {
        this.$vux.toast.text('请输入密码');
        return false;
      }
      const params = {
        username: this.username,
        password: this.password
        // username: 13067870772,
        // password: 111111
      }
      this.setLoginInfo(params).then(res => {
        if (res) {
          setTimeout(() => {
            this.$router.push({ path: '/home' });
          }, 300);
        }
      })
    }
  }
};
</script>

<style lang="less" scoped>
  .login-container {
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    .login {
      width: 86.67%;
      margin-left: auto;
      margin-right: auto;
      margin-top: 31.33%;
      .comm {
        position: relative;
        width: 100%;
        height: 1rem;
        padding-left: 1.2rem;
        padding-right: 0.5rem;
        background: #FFFFFF;
        border: 0.02rem solid #D2D2D2;
        border-radius: 1rem;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        &::before {
          content: '';
          position: absolute;
          left: 0.5rem;
          top: 0.3rem;
          width: 0.44rem;
          height: 0.44rem;
          background-size:100% 100%;
          background-repeat: no-repeat;
        }
        .input-area {
          position: relative;
          display: flex;
          align-items: center;
          width: 100%;
          height: 100%;
          // line-height: 0.5rem;
          // margin-left: 1.2rem;
          // border-left: 0.02rem solid #D2D2D2;
          &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0rem;
            width: 0.02rem;
            height: 1rem;
            transform: scaleY(0.5);
            background: #D2D2D2;
          }
        }
        input {
          width: 100%;
          height: 100%;
          line-height: 0.5rem;
          padding: 0.2rem 0.2rem 0.2rem 0.3rem;
          font-size: 0.30rem;
          color: #333333;
          box-sizing: border-box;
          &::-webkit-input-placeholder{
            font-size: 0.28rem;
          }
        }
      }
      .login-info {
        .account {
          margin-bottom: 0.3rem;
          &::before {
            background-image: url('../../assets/imgs/login/icon-my@2x.png');
          }
        }
        .password {
          margin-bottom: 0.6rem;
          &::before {
            background-image: url('../../assets/imgs/login/icon-lock@2x.png');
          }
          .input-area {
            padding-right: 0.54rem;
          }
          .view {
            position: absolute;
            right: 0.4rem;
            padding: 0.1rem;
            .icon {
              display: block;
              width: 0.44rem;
              height: 0.44rem;
              background-size: 100%;
              background-repeat: no-repeat;
              background-position: center center;
              background-image: url('../../assets/imgs/login/icon-view@2x.png');
            }
            &.no .icon {
              background-image: url('../../assets/imgs/login/icon-noview@2x.png');
            }
          }
        }
        .login-btn {
          width: 100%;
          height: 1rem;
          line-height: 1rem;
          font-size: 0.34rem;
          color: #FFFFFF;
          text-align: center;
          background: #D44743;
          border-radius: 1rem;
        }
        .reg-pass {
          margin: 0.26rem 0.5rem;
          span {
            display: inline-block;
            line-height: 0.4rem;
            font-size: 0.26rem;
            color: #D44743;
            letter-spacing: 0.03rem;
          }
          .pass {
            float: right;
            color: #666666;
          }
        }
      }
    }
    .login-other {
      margin: 1.9rem 0.3rem 0;
      .other {
        position: relative;
        margin-bottom: 0.54rem;
        text-align: center;
        overflow: hidden;
        &::before {
          content: '';
          position: absolute;
          top: 50%;
          left: 0.3rem;
          right: 0.3rem;
          height: 0.01rem;
          transform: scaleY(0.5);
          background: #D2D2D2;
        }
        span {
          position: relative;
          display: inline-block;
          padding: 0 0.2rem;
          line-height: 0.4rem;
          font-size: 0.26rem;
          color: #999999;
          letter-spacing: 0.03rem;
          background: #FFFFFF;
          z-index: 1;
        }
      }
      .others {
        text-align: center;
        img {
          display: inline-block;
          width: 0.8rem;
          height: 0.8rem;
          margin: auto 0.8rem;
        }
      }
    }
  }
</style>
